<template>
  <div class="myorder_edit">
    <div
      class="state_box"
      v-if="title === '交易完成'"
    >
      <div class="one_box">
        <p>订单状态：{{title}}</p>
        <p>订单编号：{{list[0].ctime}}</p>
        <p>下单时间：{{list[0].ctime|timefmt}}</p>
      </div>
    </div>
    <div
      class="state_box"
      v-else-if="title === '待付款'"
    >
      <div class="one_box">
        <p>订单状态：{{title}}</p>
        <p>订单编号：{{list[0].ctime}}</p>
        <p>下单时间：{{list[0].ctime|timefmt}}</p>
        <van-button
          type="primary"
          block
          @click="$router.push('/cart')"
        >去支付</van-button>
        <van-button
          type="warning"
          block
          @click='delgoods'
        >取消订单</van-button>
      </div>
    </div>
    <div
      class="state_box"
      v-else-if="title === '待确认'"
    >
      <div class="one_box">
        <p>订单状态：{{title}}</p>
        <p>订单编号：{{list[0].ctime}}</p>
        <p>下单时间：{{list[0].ctime|timefmt}}</p>
        <van-button
          type="primary"
          block
          @click="setstatus"
        >确认收货</van-button>
        <van-button
          type="warning"
          block
          @click='delgoods'
        >取消订单</van-button>
      </div>
    </div>
    <!-- 下重复 -->
    <div class="two_box">
      <p>商品金额：{{list[0].price * list[0].count | pricefmt}}</p>
      <p>配送方式：普通快递</p>
    </div>
    <div class="three_box">
      <van-card
        :num="list[0].count"
        :price="list[0].price+'.00'"
        :title="list[0].title"
        :thumb="list[0].img"
      />
    </div>
  </div>
</template>
<script>
import { getorderlist } from '../../api/article'
export default {
  data() {
    return {
      id: this.$route.query.id,
      title: null,
      list: []
    }
  },
  methods: {
    async load() {
      const goodslist = JSON.parse(localStorage.goodsinfo || '[]')
      const newslist = goodslist.filter(item => {
        return item.id === parseInt(this.id)
      })
      this.list = newslist
      const { data } = await getorderlist()
      const newsdata = data.filter(item => {
        return item.isdel === newslist[0].status
      })
      this.title = newsdata[0].label
    },
    delgoods() {
      const goodslist = JSON.parse(localStorage.goodsinfo || '[]')
      const index = goodslist.findIndex(item => {
        return item.id === parseInt(this.id)
      })
      console.log(index)
      goodslist.splice(index, 1)
      localStorage.goodsinfo = JSON.stringify(goodslist)
      this.$router.go(-1)
    },
    setstatus() {
      const goodslist = JSON.parse(localStorage.goodsinfo || '[]')
      goodslist.forEach(item => {
        if (item.id === parseInt(this.id)) {
          item.status = 5
        }
      })
      localStorage.goodsinfo = JSON.stringify(goodslist)
      this.$router.go(-1)
    }
  },
  created() {
    this.load()
  }
}
</script>
<style lang="scss" scoped>
.myorder_edit {
  background-color: #fafafa;
  padding: 10px 0;
  height: 1000px;
  .one_box {
    padding: 10px;
    font-size: 14px;
    background-color: #fff;
    .van-button {
      margin: 5px;
    }
  }
  .two_box {
    padding: 10px;
    font-size: 14px;
    margin: 10px 0;
    background-color: #fff;
  }
  .three_box {
    padding: 10px;
    background-color: #fff;
    .van-card {
      background-color: #fff;
      .van-card__title {
        margin-top: 10px;
        font-size: 14px;
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .van-card__bottom {
        font-size: 12px;
        .van-card__price {
          font-size: 14px;
          color: red;
        }
      }
    }
  }
}
</style>